<template>
	<view class="content">
		<view class="filt-cont">
			<view class="head-title">时间</view>
			<!-- 快捷时间选择 -->
			<view class="quick-select">
				<view :class="quickSelected==index?'item active':'item'" v-for="(item, index) in selcetArr" :key="index" @click="quickSelect(index)">
					{{ item }}
				</view>
			</view>
			<!-- 时间区间选择 -->
			<view class="time-chose">
				<view class="item">
					<image class="img" src="../../static/images/icon_date.png" mode="aspectFill"></image>
					<picker mode="date" :value="startTime" start="2020-01-01" end="2060-12-31" @change="statrDateChange">
						<input type="text" disabled placeholder="开始时间" v-model="startTime" />
					</picker>
				</view>
				<view class="line"></view>
				<view class="item">
					<image class="img" src="../../static/images/icon_date.png" mode="aspectFill"></image>
					<picker mode="date" :value="endTime" start="2020-01-01" end="2060-12-31" @change="endDateChange">
						<input type="text" disabled placeholder="结束时间" v-model="endTime" />
					</picker>
				</view>
			</view>
			<!-- 员工与部门 -->
			<view class="cu-form-group other-sec">
				<view class="title">员工与部门</view>
				<view class="picker" @click="choseOther">
					请选择
					<image class="arrow" src="../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn-box">
				<view class="btn gray">
					<image class="img" src="../../static/images/icon_reset.png" mode=""></image>
					重置
				</view>
				<view class="btn blue">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quickSelected: 0, // 快捷时间选择当前选中项
				selcetArr: ['今天','昨天','本周','上周','本月','上月','本季度','上季度','本年','去年'],
				startTime: '', // 时间区间-开始
				endTime: '' // 时间区间-结束
			}
		},
		onLoad() {	
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			// 时间快捷选项选择
			quickSelect(index){
				this.quickSelected = index
			},
			// 开始时间选择
			statrDateChange(e) {
				this.startTime = e.detail.value
			},
			// 结束时间选择
			endDateChange(e) {
				this.endTime = e.detail.value
			},
			// 员工、部门选择
			choseOther() {
				uni.navigateTo({
					url: './staffDepart'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.filt-cont{
		background: #fff;
		padding: 0 24upx;
		.head-title{
			font-size: 32upx;
			color: #999;
			padding: 20upx 0;
		}
		.quick-select{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 32%;
				height: 70upx;
				line-height: 70upx;
				font-size: 24upx;
				color: #333;
				text-align: center;
				background: #F4F2F3;
				border-radius: 8upx;
				margin-right: 2%;
				margin-bottom: 20upx;
				&:nth-child(3n){
					margin-right: 0;
				}
				&.active{
					background: #2565FB;
					color: #fff;
				}
			}
		}
		.time-chose{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;
			.line{
				width: 30upx;
				height: 2px;
				background: #D9D9D9;
			}
			.item{
				width: 45%;
				height: 80upx;
				display: flex;
				align-items: center;
				border: 1px solid #D9D9D9;
				border-radius: 8upx;
				padding: 0 20upx;
				.img{
					width: 30upx;
					height: 30upx;
					margin-right: 20upx;
				}
			}
		}
		.other-sec{
			padding: 0;
			.picker{
				.arrow{
					width: 20upx;
					height: 20upx;
					margin-left: 20upx;
				}
			}
		}
		.btn-box{
			padding: 20upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				width: 45%;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 8upx;
				font-size: 28upx;
				&.gray{
					background: #F7F5F6;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
				}
				&.blue{
					background: #3C81F8;
					color: #fff;
				}
			}
		}
	}
</style>
